<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-11 16:09:16
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-13 16:26:30
 * @FilePath: \nien-vue3-admin\src\components\collectionAccount\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="tsx">
import { ref, useAttrs, defineComponent, h } from 'vue'
import { collectionInfoList } from '@/api/finance/FinancialManagementTools'

export default defineComponent({
  setup() {
    // el-select-v2 的元素只能取到 label 和value所以将多余参数拼到一起处理
    const split = '$@@$'
    const option = ref([
      // { label: `label1${ split }label2`, value: 22 }, 
      // { label: `label1${ split }label2`, value: 22 }, 
      // { label: `label1${ split }label2`, value: 22 }, 
      // { label: `label1${ split }label2`, value: 22 },
      // { label: `label2${ split }label4`, value: 55 }
    ])
    const query = ref<string>('')
    const attrs = useAttrs()

    const handleFilter = (qry) => {
      query.value = qry
    }
    
    const redText = (val) => {
      if (!val) return ['']
      if (!query.value) return [val]

      const arr = (`${ val }`).split(query.value)
      const renderList = []
      const len = arr.length
      arr.forEach((ele, index) => {
        renderList.push(ele)
        if (index < len - 1) {
          renderList.push(h(
            'span',
            {
              style: {
                color: 'red',
              },
            },
            {
              default: () => query.value,
            },
          ))
        }
      })
      
      return renderList
    }
    
    collectionInfoList({
      pageSize: 0,
      pageNum: 0,
    }).then(({ code, data }) => {
      if (code === 200) {
        option.value = data.map(item => ({
          label: item.organizationName + (item.property ? split + item.property : ''),
          value: item.accountNo,
        }))
      }
    })
    return { split, option, query, attrs, handleFilter, redText }
  },
  render() {
    return (
      <el-select-v2
        popper-class="my-autocomplete"
        filterable
        placeholder="请输入收款账号"
        filter-method={this.handleFilter}
        options={this.option}
        itemHeight={68}

        v-slots={{
          default: ({ item }) => {
            const labelArr = item.label.split(this.split)
            return (
              <>
                <div style="color: #8492a6; font-size: 13px" >{...this.redText(item.value)}</div>
                <div>
                  <span >{...this.redText(labelArr[0])}</span>
                  <span style="color: #ff0000">（{ labelArr[1]}）</span>
                </div>
              </>
            )
          },
        }}
      >
      </el-select-v2>
    )
  },
  
})

// const handleBlur = () => {
//   nextTick(() => {
//     setTimeout(() => 
//       query.value = ''
//       resList.value = props.accountMaintainList
//     }, 300)
//   })
// }

</script>

<style lang="less">
.my-autocomplete{
  background: red;
  .el-vl__window.el-select-dropdown__list{
    min-width: 320px;
  }
}
</style>
